<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReUpload from "@/components/ReUpload/index.vue";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "",
    content: "",
    fileList: []
  })
});

const ruleFormRef = ref();
const uploadRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

function getUploadRef() {
  return uploadRef.value;
}

defineExpose({ getRef, getUploadRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入标题"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="newFormInline.content"
            :rows="4"
            type="textarea"
            clearable
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="附件" prop="fileList">
          <ReUpload
            ref="uploadRef"
            v-model:fileList="newFormInline.fileList"
            tableName="articles"
            :businessId="newFormInline.id"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
